@import "_function";
@import "common";
.categories-page {
  header {
    .bc(#cf4cff);
    .p(0, 30, 0, 30);
    .w(690);
    .oh();
    .scan {
      .fl();
      background-image: url("../img/zuo_03.png");
      width: 30px;
      height: 46px;
      .w(30);
      .h(46);
      .bgs(30, 46);
      .m(24, 0, 18, 8);
    }
    form {
      .w(500);
      .oh();
      .fl();
      .bdr(25);
      .h(50);
      .m(18, 42, 18, 56);
      .bc(#fff);
      input {
        outline: none;
        .fl();
        .bn();
        .lh(50);
        .h(50);
        .w(430);
        .bc(#fff);
        .ti(38);
        .fs(26);
        .c(#616161);
      }
      button {
        .fl();
        background: url("../img/home_search_btn_06.png") transparent;
        .w(30);
        .h(30);
        .bs(30, 30);
        .bn();
        .mt(10);
      }
    }
    .message {
      .fl();
      background-image: url("../img/home_message.png");
      .w(42);
      .h(70);
      .bgs(42, 70);
      .mt(9);
    }
  }
  .nav {
    .bc(#cf4cff);
    .w(690);
    .p(0, 30, 0, 30);
    .oh;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    li {
      .lh(40);
      .p(0, 10, 0, 10);
      .fs(28);
      .c(#faedff);
      .bdr(8);
    }
    .on {
      .bc(#a441ff);
    }

  }
  .sear_below {
    .p(0, 30, 0, 30);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    li {
      .w(200);
      .h(228);
      border: 1px solid #666666;
      .m(30, 0, 10, 0);
      a {
        img {
          .w(200);
          .h(180);
        }
        h3 {
          .fs(24);
          .c(#333333);
          .db();
          .tc();
        }
      }
    }
  }
  footer {
    .bc(#ebb2ff);
    .w(690);
    .db();
    .h(98);
    .pf();
    bottom: 0;
    left: 0;
    .p(0, 30, 0, 30);
    .option1 i {
      background: url("../img/order_f_index.png") no-repeat;
      .w(52);
      .h(46);
      .bgs(52, 46);
    }
    .option2 i {
      background: url("../img/class_f_index.png") no-repeat;
      .bgs(46, 46);
      .w(46);
      .h(46);
    }
    .option3 i {
      background: url("../img/home_f_shopcart.png") no-repeat;
      .bgs(51, 46);
      .w(51);
      .h(46);
    }
    .option4 i {
      background: url("../img/home_f_user.png") no-repeat;
      .bgs(41, 46);
      .w(41);
      .h(46);
    }
    .option1, .option2, .option3, .option4 {
      .fl();
      .w(78);
      .mt(8);
      i {
        .db();
        margin: 0 auto;
      }
      b {
        .db();
        .tc();
        .lh(24);
        .w(78);
        .fs(20);
        .mt(10);
        .c(#333333);
      }
    }
    div ~ div {
      .ml(126);
    }

  }
}